<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <style>
        th { 
            border: #999 solid 1px;
            border-width: 2px;
        }
        td {
            border: #999 solid 1px;
            border-width: 1px;
        }
        td span a {
            border: 1px solid;
            background: gainsboro;
            margin: 2px;
        }
        a {
            text-decoration: none;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="chart">
        <table>
            <thead>
                <tr>
                    <th>
                    </th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(book,index) in cart">
                    <td>{{index+1}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.date}}</td>
                    <td>￥{{book.price}}</td>
                    <td><span><a href="#" @click.preent="deductItem(index)">-</a></span>{{book.num}}<span><a href="#" @click.prevent="addItem(index)">+</a></span></td>
                    <td><a href="#" @click.prevent="deleteItem(index)">移除</a></td>
                </tr>

            </tbody>

        </table>
        总价格:￥{{ totalAmount }}
    </div>

    <script>
        var app = new Vue({
            el: '#chart',
            data: {
                message: 'Hello Vue!',
                cart:[
                    {name:"《java编程思想》",date:"2020-9",price:98.00, num:1},
                    {name:"《数据分析与数据原理》",date:"2019-2",price:39.00, num:1},
                    {name:"《Hadoop权威指南》",date:"2019-10",price:59.00, num:1},
                    {name:"《代码大全》",date:"2018-8",price:128.00, num:1},
                ],
            },
            methods:{
                deleteItem:function(index){
                    if (confirm("确定移除么")) {
                        this.cart.splice(index,1);
                    }
                },
                addItem:function(index) {
                    this.cart[index].num++;
                },
                deductItem:function(index) {
                    if (this.cart[index].num > 1) {
                        this.cart[index].num--;
                    } else {
                        alert("已经不能再减啦，不需要请移除");
                    }
                }
            },
            computed: {
                // 计算属性的 getter
                totalAmount: function () {
                // `this` 指向 vm 实例
                    amount=0;
                    for (i=0;i<this.cart.length;i++) {
                        amount += this.cart[i].num * this.cart[i].price;
                    }
                    return amount;
                    // return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>
